<template>
    <div>
        <el-form ref="form" :model="editArticle" label-width="80px" size= "medium">
  <el-form-item label="文章标题">
    <el-input v-model="editArticle.title" clearable maxlength="50" show-word-limit></el-input>
  </el-form-item>
  
  <el-form-item label="文章内容">
    <el-input type="textarea" v-model="editArticle.body"  :autosize="{minRows:8,maxRows:25}" maxlength="3000" show-word-limit></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="saveArticle">保存</el-button>
    <el-button @click="goback">取消</el-button>
  </el-form-item>
</el-form>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        editArticle: {
          title: '',
          body: ''
        }
      }
    },
    methods: {
        goback(){
            this.$router.replace('/articles/list')
            this.$message({
                type: 'info',
                message: '操作已取消'
              });
        },

      saveArticle() {
        //  **难点** 使用模板字符串在请求路径中拼接动态参数 
          this.$http.put(`articles/${this.$route.params.id}` , this.editArticle).then((res)=>{
              
              console.log(res)
              //当axios拦截器不起作用使用res.data.status
              if( res.status){
              this.$message({
                message: '保存成功',
                type: 'success'
              });
            }
              this.$router.push('/articles/list')
          }) 
      },
        gainArticle(){
            // console.log(this.$route.params.id)
        // 根据当前路由的参数拿到需要的id 
        this.$http.get( `articles/${this.$route.params.id}` ).then((res)=>{
              // 将请求到的指定id的数据传给当前页面 
              this.editArticle = res; //当axios拦截器不起作用使用res.data 
               //console.log(res)
          })
        }
    },
    created(){
        this.gainArticle()

    }
  }
</script>